<%!String title = "Signup Page";%>
<%@ include file="/header.jsp"%>
<h1>Sign up</h1>
<b>Sign up as a La Pizzaria Webshop user by filling in your details
	below.</b>
<br>
<br>
<form method=post action=controller>
	Name: <br>
	<input name=signup_name type=text size=40 /><br> 
	<span id="username">Username (your e-mail):</span><br> 
	<input id="email" name=signup_mail type="text" onkeyup="validateUsername()" size=40 /> <br>
	<span id="passwordtitle"> Password: </span><br>
	<input id="password" name=signup_password type=text onchange="validatePassword()" size=40 /> <br> 
	<span id="passwordtext">You must contain at least six characters, at least one digit, at least one
		letter character, and at least one non-digit/letter-character</span><br>
	<br>
	<b>Delivery info:</b><br> Address:<br> <input
		name=signup_address type=text size=40 /> <br> 
	<span id="ziptitle">Zip code: </span><br>
	<input id="zip" name=signup_zip type=text onchange="validateZip()" size=40 /> <br> 
	<span id="phonetitle">Phone number: </span><br>
	<input id="phone" name=signup_phone type=text onchange="validatePhone()" size=40 /> <br> 
	<input type=submit name=signup_submit value="Submit" />
</form>

<script type="text/javascript">

// AJAX init
var http;
if (navigator.appName == "Microsoft Internet Explorer")
    http = new ActiveXObject("Microsoft.XMLHTTP");
else
    http = new XMLHttpRequest();

function sendRequest(action, responseHandler) {
    http.open("GET", action);
    http.onreadystatechange = responseHandler;
    http.send(null);
}

var timeout;

function checkEmailUniqueness(email) {
    if (http.readyState == 0 || http.readyState == 4) {
        // the request object is free
        sendRequest("http://localhost:8080/PAM_Pizza/CheckUniqueEmail?mail=" +
            encodeURIComponent(email), ajaxResponseReceived);
    } else { // let's try again in .5 sec
        window.clearTimeout(timeout);
        timeout = window.setTimeout(checkEmailUniqueness, 500);
    }
}


function ajaxResponseReceived() {
	console.log("ajaxResponseReceived" + " || readyState: " + http.readyState
	+ " || status: " + http.status);
	        if (http.readyState == 4) // operation completed?
				try {
	                if (http.status == 200) { // OK?
	                	var result = http.responseText;
	               		console.log("http.responseText: " + result);
	                	if (result == "email is not unique") {
	                		document.getElementById("username").style.color="red";
	                		document.getElementById("username").innerHTML=result;
	                	} else {
	                		document.getElementById("username").style.color="green";
	                		document.getElementById("username").innerHTML="Username (your e-mail) - UNIQUE!";
	                	}
	                } else
	                    alert("Error " + http.status);
	            } catch (e) { // may occur in case of network error
	                alert(e);
	            }
}


function validateUsername()
{
	//email/username validation
	var un = document.getElementById("email").value;
    var un_a = un.indexOf("@");
	var un_b = un.lastIndexOf(".");
	if (un_a<1 || un_b<un_a+2 || un_b+2>=un.length) {
		document.getElementById("username").style.color="red";
  		document.getElementById("username").innerHTML="The typed in username is not a valid e-mail!";
  	} else {
  		document.getElementById("username").style.color= "#333366";
  		document.getElementById("username").innerHTML="Username (your e-mail):";
  		checkEmailUniqueness(un);
  	}
}	
function validatePassword()
{
	//password validation
	var pw = document.getElementById("password").value;

	if( (pw.length>=6) && /\W/.test(pw) && /\d/.test(pw) && /[a-z]/i.test(pw) ){
  		document.getElementById("passwordtitle").style.color= "#333366";
  		document.getElementById("passwordtitle").innerHTML="Password: ";
		document.getElementById("passwordtext").style.color= "#333366";
  		document.getElementById("passwordtext").innerHTML="You have typed a valid password";
  	} else {
		document.getElementById("passwordtitle").style.color="red";
  		document.getElementById("passwordtitle").innerHTML="The typed in password is not a valid password!";
  		document.getElementById("passwordtext").innerHTML="You must contain at least six characters, at least one digit, at least one letter character, and at least one non-digit/letter-character";
  	}
}
function validateZip()
{
	//Zip code validation
	var z = document.getElementById("zip").value;

	if(/\d{4}/.test(z) && z.length == 4){
		document.getElementById("ziptitle").style.color= "#333366";
  		document.getElementById("ziptitle").innerHTML="Zip: ";
  	} else {
  		document.getElementById("ziptitle").style.color= "red";
  		document.getElementById("ziptitle").innerHTML="The zip code is not valid! It must be 4 digits";
  	}
}
function validatePhone()
{
	//Phone number validation
	var pn = document.getElementById("phone").value;

	if(/\d{8}/.test(pn) && pn.length == 8){
		document.getElementById("phonetitle").style.color= "#333366";
  		document.getElementById("phonetitle").innerHTML="Phone: ";
  		
  	} else {
		document.getElementById("phonetitle").style.color="red";
  		document.getElementById("phonetitle").innerHTML="The phone number is not valid! It must be 8 digits";
  	}
}
</script>
</body>
</html>